<template>
	<div class="icons-container">
		<el-tabs type="border-card">
			<el-tab-pane label="Icons">
				<div class="grid">
					<div
						v-for="item of svg_icons"
						:key="item"
						@click="handleClipboard(generateIconCode(item), $event)"
					>
						<el-tooltip
							effect="dark"
							:content="generateIconCode(item)"
							placement="top"
						>
							<div class="icon-item">
								<svg-icon :icon-class="item" />
								<span>{{ item }}</span>
							</div>
						</el-tooltip>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="Element-UI Icons">
				<div class="grid">
					<div
						v-for="(icon, name) of icons"
						:key="name"
						@click="handleClipboard(generateElementIconCode(name), $event)"
					>
						<el-tooltip
							effect="dark"
							:content="generateElementIconCode(name)"
							placement="top"
						>
							<div class="icon-item">
								<el-icon :size="20">
									<component :is="icon" />
								</el-icon>
								<span>{{ name }}</span>
							</div>
						</el-tooltip>
					</div>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon/index.vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

defineOptions({
	// eslint-disable-next-line
	name: 'Icons',
	inheritAttrs: false
})
const svg_icons: string[] = [
	'api',
	'cascader',
	'client',
	'close',
	'close_all',
	'close_left',
	'close_other',
	'close_right',
	'dict',
	'document',
	'download',
	'drag',
	'edit',
	'exit-fullscreen',
	'eye-open',
	'eye',
	'fullscreen',
	'github',
	'homepage',
	'language',
	'link',
	'menu',
	'message',
	'money',
	'monitor',
	'order',
	'password',
	'peoples',
	'perm',
	'publish',
	'role',
	'security',
	'size',
	'skill',
	'system',
	'tree',
	'user',
	'uv',
	'verify-code'
]
const icons = ref(ElementPlusIconsVue)

const { copy } = useClipboard()

function generateIconCode(symbol: any) {
	return `<svg-icon icon-class="${symbol}" />`
}

function generateElementIconCode(symbol: any) {
	return `<el-icon><${symbol} /></el-icon>`
}

function handleClipboard(text: any, event: any) {
	// clipboard(text, event);
	copy(text)
		.then(() => {
			ElMessage.success('Copy successfully')
		})
		.catch(() => {
			ElMessage.warning('Copy failed')
		})
}
</script>

<style lang="scss" scoped>
.icons-container {
	margin: 10px 20px 0;
	overflow: hidden;

	.grid {
		position: relative;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	}

	.icon-item {
		float: left;
		width: 100px;
		height: 85px;
		margin: 20px;
		font-size: 30px;
		color: var(--el-text-color-regular);
		text-align: center;
		cursor: pointer;
	}

	span {
		display: block;
		margin-top: 10px;
		font-size: 16px;
	}

	.disabled {
		pointer-events: none;
	}
}
</style>
